<template>
  <div class="Audio">
    <div>
      <audio v-bind:src="audioUrl" ref="player"></audio>
      <div class="pgs-container">
        <div class="pgs">
          <div class="pgs-play" ref="progress" id="progress" v-bind:style="{width: progressWidth}"></div>
        </div>
        <!-- <div v-on:click="changeTime" class="btn-progress" ref="progressBtn"></div> -->
      </div>

      <div class="controls">
        <span class="played-time">{{formatCurrentTime}}</span>
        <img v-on:click="togglePlayer" class="btn" v-bind:src="isPlaying ? playImg : pauseImg">
        <span class="audio-time" id="audioTime">{{duration}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false,
      playImg: require("../../images/icon/play.png"),
      pauseImg: require("../../images/icon/pause.png"),
      duration: 0,
      formatCurrentTime: "00:00:00",
      progressWidth: "0%",
      currentTime: 0,
      // audioUrl: 'http://cdn-users-pub.xlingual.net/5bd2e10d923090e07254e513/audio/FmHkUj1lItBsrSULuX1XuIeRzmVh.mpeg',  // 20s
      // audioUrl: 'http://cdn-users-pub.xlingual.net/5bd2e10d923090e07254e513/audio/Fm7HZeecqbd2zZvCBUmJxRgEM3Uo.mp3',// 1s

    };
  },

  props: ["audioUrl"],

  mounted() {
    this.addEventListeners();
    // let player = this.$refs.player;
    // player.pause();
      
  },
  beforeDestroyed() {
    this.removeEventListeners();
  },

  methods: {
    // --------------播放监听------------------------
    addEventListeners: function() {
      const self = this;
      let player = this.$refs.player;

      self.$refs.player.addEventListener("timeupdate", self._currentTime),
        self.$refs.player.addEventListener("canplay", self._durationTime);
    },
    removeEventListeners: function() {
      const self = this;
      self.$refs.player.removeEventListener("timeupdate", self._currentTime);
      self.$refs.player.removeEventListener("canplay", self._durationTime);
    },
    _currentTime: function() {
      const self = this;

      // 修改变速
      let progress = this.$refs.progress;
      setTimeout(function() {
        progress.style.transition = "1s";
      }, 100);

      self.currentTime = self.$refs.player.currentTime;
      self.formatCurrentTime = this.formatTime(
        parseInt(self.$refs.player.currentTime)
      );
      // console.log(self.currentTime);

      let duration = self.$refs.player.duration;
      let currentTime = self.$refs.player.currentTime;

      self.progressWidth = (currentTime / duration) * 100 + "%";
    },
    _durationTime: function() {
      const self = this;
      self.duration = this.formatTime(parseInt(self.$refs.player.duration));
      // console.log(self.duration);
    },
    // --------------播放监听------------------------

    formatTime: function(time) {
      var result = "00:00:00";
      var hour, minute, second;
      if (time > 0) {
        hour = Math.floor(time / 3600);
        if (hour < 10) {
          hour = "0" + hour;
        }
        minute = Math.floor((time - 3600 * hour) / 60);
        if (minute < 10) {
          minute = "0" + minute;
        }

        second = Math.floor((time - 3600 * hour - 60 * minute) % 60);
        if (second < 10) {
          second = "0" + second;
        }
        result = hour + ":" + minute + ":" + second;
      }
      return result;
    },

    togglePlayer: function() {
      let player = this.$refs.player;
      let progress = this.$refs.progress;

      if (!player.paused) {
        player.pause();
        this.isPlaying = false;
      } else {
        //监听播放完成事件
        player.addEventListener("ended", this.audioEnded, false);

        let duration = player.duration;
        let currentTime = player.currentTime;

        if (currentTime >= duration) {
          player.currentTime = 0;
          progress.style.transition = "0s";
        }
        player.play();
        this.isPlaying = true;
      }
    },

    //播放完成
    audioEnded() {
      let player = this.$refs.player;
      player.pause();
      this.isPlaying = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.Audio {
  @include fj(center);
  align-items: center;
  width: 5rem;
  margin: 0 auto;
  height: 2rem;
}
.pgs-container {
  position: relative;
}
.pgs {
  width: 4rem;
  margin: 0 auto 0.3rem;
  background-color: #e3e8ee;
  text-align: center;
  overflow: hidden;
  height: 4px;
}
.pgs-play {
  width: 0;
  height: 100%;
  background-color: #16e08f;
  z-index: 1;
  transition: 1s;
}
.btn-progress {
  position: absolute;
  top: -2px;
  left: 0;
  height: 8px;
  width: 8px;
  border: 2px solid #478f59;
  border-radius: 25px;
  background: #478f59;
}
.audio-name {
  width: 100%;
  text-align: center;
  color: #666;
  font-size: 12px;
}
.controls {
  @include fj(space-around);
  align-items: center;
  width: 100%;
  height: 0.4rem;
  padding: 0;
  text-align: center;
}
.btn {
  width: 0.5rem;
  height: 0.5rem;
  display: block;
  color: #478f59;
}
.controls span {
  color: #b3b5b7;
  font-size: 12px;
  display: inline-block;
}
.audio-time {
  display: inline-block;
  vertical-align: middle;
}
</style>
